<template>
	<div id="">
		<div id="s" style="width: 90%; height: 100px; margin-left: 5%; line-height: 100px; border-bottom: dotted #000000;">
			<div id="biaoti" style="width: 150px;float:left">
				<h3 v-if="i==1">请先选择餐桌</h3>
				<h3 v-if="i==0">点餐</h3>
				<h3 v-if="i==2">订单信息</h3>
			</div>
			<div id="cz" style="width: 50px;height: 50px; margin-right: 50px;float: right;" v-if="i==1">
				预定
			</div>
			<div id="cc" v-if="i==1" style="background-color: indianred; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
			<div id="cz" v-if="i==1" style="width: 50px;height: 50px; margin-right: 10px;float: right;">
				有客
			</div>
			<div id="cc" v-if="i==1" style="background-color: coral; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
			<div id="cz" v-if="i==1" style="width: 50px;height: 50px; margin-right: 10px;float: right;">
				空闲
			</div>
			<div id="cc" v-if="i==1" style="background-color: lightskyblue; width: 20px; height: 20px; margin-top: 40px; margin-right: 10px;float: right;"></div>
			<div id="zh" v-if="i==0||i==2" style="width: 100px; float: left; margin-left: 1200px;" v-model="zh">
				<h3>桌号{{zh}}</h3>
			</div>

		</div>
		<div id="b" style="width: 100%; height: 770px;">
			<div id="vvv" v-if="i==1">
				<div class="bt">
					<div class="btr1">
						餐桌编号
					</div>
					<div class="btr2">
						容纳人数
					</div>
					<div class="btr2">
						订单状态
					</div>
					<div class="btr2">
						餐桌操作
					</div>
				</div>
				<div class="zt">
					<div :class="{'kkk0':status[index]==0, 'kkk1':status[index]==1,'kkk2': status[index]==2}" v-for="(t,index) in table">
						<div class="tid">{{t.tid}}号桌</div>
						<div class="tnum">{{t.tnum}}</div>
						<div class="ddzt">
							<el-button type="primary" round v-if="status[index]==1" @click="ckdd(t.tid)">查看订单信息</el-button>
							<el-dialog title="订单信息" :visible.sync="dialogTableVisible">
								<el-table :data="dd">
									<el-table-column property="vid.vname" label="菜名" width="200"></el-table-column>
									<el-table-column property="cou" label="数量" width="200"></el-table-column>
								</el-table>
							</el-dialog>

						</div>
						<div class="cz">
							<el-button type="warning" icon="el-icon-chicken" round v-if="status[index]!=1" @click="dc(t.tid)">点餐</el-button>
							<el-button type="warning" icon="el-icon-chicken" round v-if="status[index]==1" @click="dc(t.tid)">加餐</el-button>
							<el-button type="warning" icon="el-icon-chicken" round v-if="status[index]==1" @click="ct(t.tid)">撤台</el-button>
						</div>
					</div>
				</div>
			</div>

			<div id="dcc" v-if="i==0" style="margin-left: 100px;">
				<template>
					<el-tabs :tab-position="tabPosition" style="height: 600px;width: 1500px;">
						<el-tab-pane label="全部菜品">
							<div id="vvvv">
								<div class="veg" v-for="(v,zindex) in veg" v-show="ish[zindex]==1">
									<div class="vimg">
										<img :src="v.vpicture" width="150px" height="150px">
									</div>
									<div class="vr">
										<div id="kkkkk" style="width: 100px; height: 20px;"></div>
										<div class="vrz">
											{{v.vname}}
										</div>
										<div class="vrz">
											价格:{{v.vprice}}
										</div>
										<div class="vrz">
											会员价:{{v.vipprice}}
										</div>
										<div class="vrz">
											<el-input-number v-model="num[zindex]" controls-position="right" @change="handleChange(v,num[zindex])" :min="0" :max="10" label="描述文字" style="width: 100px;"></el-input-number>
										</div>
									</div>
								</div>

							</div>
						</el-tab-pane>
						<el-tab-pane label="今日热销">jj</el-tab-pane>
						<el-tab-pane :label="ty.vtypename" v-for="(ty,ind) in type">
							<div class="veg" v-for="(vt,vtindex) in veg" v-show="vt.vtypeid.vtypeid==vty[ind]&&ish[vtindex]==1">
								<div class="vimg">
									<img :src="vt.vpicture" width="150px" height="150px">
								</div>
								<div class="vr">
									<div id="kkkkk" style="width: 100px; height: 20px;"></div>
									<div class="vrz">
										{{vt.vname}}
									</div>
									<div class="vrz">
										价格:{{vt.vprice}}
									</div>
									<div class="vrz">
										会员价:{{vt.vipprice}}
									</div>
									<div class="vrz">
										<el-input-number controls-position="right" @change="handleChange(vt,num[vtindex])" v-model="num[vtindex]" :min="0" :max="10" label="描述文字" style="width: 100px;"></el-input-number>
									</div>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</template>
				<div id="vb" v-if="i==0">
					<div class="vbim">
						<el-badge :value="this.value">
							<el-popover :placement="this.placement" width="1400" trigger="click">
								<el-table :data="ddData" class="item">
									<el-table-column width="233" prop="vname" label="菜品"></el-table-column>
									<el-table-column width="233" prop="vprice" label="价格"></el-table-column>
									<el-table-column width="233" prop="vipprice" label="会员价"></el-table-column>
									<el-table-column width="233" prop="num" label="数量"></el-table-column>
									<el-table-column width="233" prop="zj" label="原总价"></el-table-column>
									<el-table-column width="233" prop="hyzj" label="会员总价"></el-table-column>
								</el-table>
								<i class="el-icon-s-shop" slot="reference"></i>
							</el-popover>
						</el-badge>
					</div>
					<div class="vbpr1">
						原价:￥{{zjg}}
					</div>
					<div class="vbpr2">
						会员价:￥{{hyzjg}}
					</div>
					<div class="vbbu" @click="jiesuan">
						去结算
					</div>
				</div>
			</div>

			<div id="dddd" v-if="i==2" style="width: 1500px; margin-left: 80px;height: 600px;overflow: auto;">
				<el-table :data="ddData" style="200px">
					<el-table-column width="233" prop="vname" label="菜品"></el-table-column>
					<el-table-column width="233" prop="vprice" label="价格"></el-table-column>
					<el-table-column width="233" prop="vipprice" label="会员价"></el-table-column>
					<el-table-column width="233" prop="num" label="数量"></el-table-column>
					<el-table-column width="233" prop="zj" label="原总价"></el-table-column>
					<el-table-column width="233" prop="hyzj" label="会员总价"></el-table-column>
				</el-table>
			</div>
			<div id="vb" v-if="i==2" style="margin-left: 70px;">
				<div class="vbpr1">
					原价:￥{{zjg}}
				</div>
				<div class="vbpr2">
					会员价:￥{{hyzjg}}
				</div>
				<div class="vbbu" @click="dialogFormVisible = true">结账</div>
				<el-dialog title="是否为会员" :visible.sync="dialogFormVisible">
					<el-form :model="form">
						<el-radio v-model="form.radio" label=0>普通支付</el-radio>
						<el-radio v-model="form.radio" label=1>会员支付</el-radio>
						<el-form-item label="请输入会员预留手机号码" :label-width="formLabelWidth" v-if="form.radio==1">
							<el-input v-model="form.ptele" autocomplete="off"></el-input>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="isvip">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
					<h3>消费金额{{zjg}}元</h3>
					<img src="../../../build/微信图片_20201029094648.png" style="width: 350px; height: 500px;margin-left: calc(50% - 175px);" />
					<span slot="footer" class="dialog-footer">
    					<el-button @click="centerDialogVisible = false">取 消</el-button>
    					<el-button type="primary" @click="tjdd">确 定</el-button>
  					</span>
				</el-dialog>
				<div class="vbfh" @click="fhdc">
					返回点餐
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isH: false,
				table: [],
				veg: [],
				type: [],
				status: [],
				vty: [],
				ddData: [],
				ish: [],
				dd:[],
				dialogFormVisible: false,
				centerDialogVisible: false,
				dialogTableVisible:false,
				form: {
					radio: '1',
					ptele: ''
				},
				formLabelWidth: '200px',
				formLabelWidth1: '120px',
				i: 1,
				zh: '',
				placement: 'top-start',
				tabPosition: 'left',
				num: [],
				value: 0,
				zjg: 0,
				hyzjg: 0
			}
		},
		created: function() {
			this.queryt();

		},
		methods: {
			queryisvip: function(vtele) {
				this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/isHas?vtele=?{vtele}`)
					.then((response) => {
						console.log("aaaaa")
						if(response.data.isOk) {
							this.isH = true;
							console.log(response);
							console.log(this.isH);
						}
					});
			},
			queryt: function() {
				let s = [];
				this.$http.get("http://localhost:8080/OrderSystemServer/order/table/getalltable")
					.then((response) => {
						console.log(response);
						this.table = response.data.body;
						for(let i = 0; i < this.table.length; i++) {
							s.push(this.table[i].z.tstatus);
						}
						this.status = s;
						console.log(this.status);
					});
			},
			queryqb: function() {
				this.$http.get("http://localhost:8080/OrderSystemServer/order/veg/show")
					.then((response) => {
						console.log(response.data.body);
						this.veg = response.data.body;
						for(let i = 0; i < this.veg.length; i++) {
							this.num.push(0);
							this.ish.push(this.veg[i].kc.ishave);
						}
						console.log(this.ish);
					});
			},
			querytypes: function() {
				this.$http.get('http://localhost:8080/OrderSystemServer/order/veg/showtype')
					.then((response) => {
						let c = [];
						console.log(response.data.body);
						this.type = response.data.body;
						for(let i = 0; i < this.type.length; i++) {
							c.push(this.type[i].vtypeid);
						}
						this.vty = c;
						console.log(this.vty);
					})
			},
			dc: function(tid) {
				this.i = 0;
				this.zh = tid;
				this.queryqb();
				this.querytypes();
				//先把状态变成有人
				var tabledt = {
					"tid": {
						"tid": tid
					},
					"tstatus": 1
				};
				this.$http.post("http://localhost:8080/OrderSystemServer/order/table/tableupdatestatus", tabledt)
					.then((response) => {
						console.log(response);
						this.queryt();
					});
			},
			handleChange: function(v, num) {
				console.log(v);
				console.log(num);
				var isC = false;
				var j;
				for(j = 0; j < this.ddData.length; j++) {
					if(this.ddData[j].vid == v.vid) {
						//订单数组中有本菜品
						isC = true;
						break;
					}
				}
				if(isC) {
					this.ddData[j].num = num;
					this.ddData[j].zj = v.vprice * num;
					this.ddData[j].hyzj = v.vipprice * num;
					if(this.ddData[j].num == 0) {
						//删除数量减为零的菜品
						this.ddData.splice(j, 1);
					}
				} else {
					//本次点餐第一次点
					let y = {
						"vid": v.vid,
						"vname": v.vname,
						"vprice": v.vprice,
						"vipprice": v.vipprice,
						"num": num,
						"zj": v.vprice * num,
						"hyzj": v.vipprice * num
					};
					this.ddData.push(y);
				}
				console.log(this.ddData);
				this.value = this.ddData.length;
				let z = 0;
				let hz = 0;
				for(let i = 0; i < this.ddData.length; i++) {
					z = z + this.ddData[i].zj;
					hz = hz + this.ddData[i].hyzj;
				}
				this.zjg = z;
				this.hyzjg = hz;
			},
			jiesuan: function() {
				this.i = 2;
				console.log(this.zh);
				console.log(this.ddData);
			},
			fhdc: function() {
				this.i = 0;
			},
			isvip: function() {
				this.dialogFormVisible = false;
				if(this.form.radio == 0) {
					//普通顾客
					this.centerDialogVisible = true;
				} else {
					console.log(this.form.ptele);
					this.xsm(this.form.ptele);
				}
			},
			xsm: function(vtele) {
				this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/isHas?vtele=${vtele}`)
					.then((response) => {
						console.log(response);
						if(response.data.isOK) {
							//有，扣款
							this.$http.get(`http://localhost:8080/OrderSystemServer/order/vip/chargrback?vtele=${vtele}&money=${this.hyzjg}`)
								.then((response) => {
									console.log(response);
									if(response.data.isOK) {
										this.$message({
											type: 'success',
											message: '扣款成功'

										});
										this.tjdd();
									}
								});
						} else {
							//没有这个人
							this.$message({
								type: 'danger',
								message: '没有此用户'
							});
						}
					});
			},
			tjdd: function() {
				//提交订单
				this.centerDialogVisible = false;
				for(let i = 0; i < this.ddData.length; i++) {
					let ot = {
						"tid": {
							"tid": this.zh
						},
						"vid": {
							"vid": this.ddData[i].vid
						},
						"cou": this.ddData[i].num
					}
					console.log(ot);
					this.$http.post("http://localhost:8080/OrderSystemServer/Order/Order/add", ot)
						.then((response) => {
							console.log(response);
						});
				}
			},
			ckdd:function(tid){
				console.log("11111")
				this.dialogTableVisible=true;
				this.$http.get(`http://localhost:8080/OrderSystemServer/Order/Order/getall?tid=${tid}`)
				.then((response)=>{
					this.dd=response.data.body;
				});
			},
			ct:function(tid){
				var tabledt = {
					"tid": {
						"tid": tid
					},
					"tstatus": 0
				};
				this.$http.post("http://localhost:8080/OrderSystemServer/order/table/tableupdatestatus", tabledt)
					.then((response) => {
						console.log(response);
						this.queryt();
					});
					
				this.$http.get(`http://localhost:8080/OrderSystemServer/Order/Order/del?tid=${tid}`)
				.then((response)=>{
					if(response.data.isOK) {
								this.$message({
									type: 'success',
									message: '撤台成功'
								});
								this.queryvip();
							}
				});
			}
		}
	}
</script>

<style>
	.bt {
		clear: both;
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 10px;
	}
	
	.btr1 {
		width: 130px;
		height: 50px;
		font-size: 18px;
		text-align: center;
		float: left;
		margin-left: 330px;
		color: dimgrey;
		//background-color: #545C64;
	}
	
	.btr2 {
		width: 130px;
		height: 50px;
		font-size: 18px;
		text-align: center;
		float: left;
		margin-left: 150px;
		color: dimgrey;
	}
	
	.zt {
		width: 1200px;
		height: 650px;
		margin-left: calc(50% - 600px);
		border-bottom: solid #696969;
		border-top: solid #696969;
		overflow: auto;
	}
	
	.kkk0 {
		/*没人*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: lightskyblue;
		border-radius: 20px;
	}
	
	.kkk1 {
		/*有人*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: coral;
		border-radius: 20px;
	}
	
	.kkk2 {
		/*有预定*/
		width: 1000px;
		height: 100px;
		margin-left: calc(50% - 500px);
		margin-top: 5px;
		background-color: indianred;
		border-radius: 20px;
	}
	
	.tid {
		width: 100px;
		height: 100px;
		margin-left: 20px;
		text-align: center;
		line-height: 100px;
		float: left;
		//background-color: #FF7F50;
	}
	
	.tnum {
		width: 100px;
		height: 100px;
		margin-left: 180px;
		text-align: center;
		line-height: 100px;
		float: left;
		//background-color: aqua;
	}
	
	.ddzt {
		width: 100px;
		height: 100px;
		margin-left: 170px;
		text-align: center;
		line-height: 100px;
		float: left;
	}
	
	.cz {
		width: 330px;
		height: 100px;
		//margin-left: 10px;
		text-align: center;
		line-height: 100px;
		float: left;
	}
	
	#vvvv {
		width: 1330px;
		height: 600px;
		//background-color: #CD5C5C;
		overflow: auto;
	}
	
	.veg {
		width: 300px;
		height: 200px;
		float: left;
		background-color: lightgrey;
		border-radius: 10px;
		margin-left: 20px;
		margin-top: 20px;
	}
	
	.vimg {
		width: 150px;
		height: 150px;
		margin-top: 25px;
		margin-left: 10px;
		float: left;
		border: solid darkgrey;
	}
	
	.vr {
		width: 100px;
		height: 180px;
		margin-top: 10px;
		margin-left: 20px;
		float: left;
		//background-color: #87CEFA;
	}
	
	.vrz {
		width: 100%;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-top: 5px;
		font-size: 15px;
		font-weight: 500;
	}
	
	#vb {
		width: 1500px;
		height: 70px;
		margin-top: 30px;
		border-radius: 100px;
		background-color: #545C64;
	}
	
	.vbbu {
		width: 150px;
		height: 70px;
		float: right;
		border-bottom-right-radius: 100px;
		border-top-right-radius: 100px;
		background-color: cornflowerblue;
		line-height: 70px;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		cursor: pointer;
	}
	
	.vbfh {
		width: 150px;
		height: 70px;
		float: right;
		background-color: cornflowerblue;
		line-height: 70px;
		text-align: center;
		font-size: 20px;
		font-weight: 600;
		cursor: pointer;
		border-right: solid black;
	}
	
	.vbim {
		width: 100px;
		height: 100%;
		margin-left: 30px;
		//background-color: #87CEFA;
		float: left;
		font-size: 60px;
		line-height: 60px;
		text-align: center;
		color: cornflowerblue;
	}
	
	.vbpr1 {
		width: 200px;
		height: 70px;
		text-align: center;
		line-height: 70px;
		font-size: 30px;
		font-weight: 400;
		color: white;
		float: left;
		margin-left: 650px;
	}
	
	.vbpr2 {
		width: 200px;
		height: 70px;
		text-align: center;
		line-height: 70px;
		font-size: 30px;
		font-weight: 400;
		color: cornflowerblue;
		float: left;
		margin-left: 10px;
	}
</style>